<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <com-a></com-a>
    <hr/>
    <com-a>
        你好
    </com-a>
    <hr/>
    <com-a><b>hello</b></com-a>
    <hr/>
    <com-a>
        <b>hello</b>
        <i>world</i>
    </com-a>
    <hr/>
    <com-b></com-b>
    <com-b>hello</com-b>
    <hr/>
    <com-c></com-c>
    <com-c>
        <template v-slot:a>hello</template>
    </com-c>
    <com-c>
        <template #b>{{content}}</template>
        <template v-slot:default>aaaaa</template>
    </com-c>
    <hr/>
    <com-d>
        <template #parent>{{content}}</template>
        <template #default="abc">{{abc.content}}</template>
    </com-d>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('com-a', {
        template: `
            <div>
                <h3>我是组件com-a</h3>
                <slot></slot>
            </div>
        `
    })
    Vue.component('com-b', {
        template: `
            <div>
                <h3>我是组件com-b</h3>
                <slot>我是默认值</slot>
            </div>
        `
    })

    Vue.component('com-c', {
        template: `
            <div>
                <h3>我是组件com-c</h3>
                <slot name="a"></slot>,
                <slot></slot>,
                <slot name="b"></slot>
            </div>
        `
    })
    Vue.component('com-d', {
        data() {
            return {
                content: '子组件的内容'
            }
        },
        template: `
          <div>
            <h3>我是组件com-d</h3>
            父组件：
            <slot name="parent"></slot>
            子组件：
            <slot v-bind:content="content"></slot>
          </div>
        `
    })
    new Vue({
        el: '#app',
        data() {
            return {
                content: '父组件的内容'
            }
        }
    })
</script>